<template>
  <div class="accidentDistribution-root">
    <formTitleVue
      title="报警趋势统计"
      :selectOptions="selectOptions"
      @selectChange="selectChange"
    />
    <!-- <div id="echarts-accidentDistribution"></div> -->
    <myLine domId="accident-accidentDistribution-echarts" height="30vh" :chartsData="chartsData" :myOption="echartsOption"/>
  </div>
</template>

<script>
  import formTitleVue from "@/components/FormTitle/formTitle.vue";
  import myLine from '@/components/Echarts/myLine.vue';
  import { time_select_optios } from '@/utils/global.js';
  import {alarmHandlingTrend} from '@/api/alarm/statistics'

  export default {
    name: "accidentDistribution",
    components: {
      formTitleVue,myLine,
    },
    data() {
      return {
        selectOptions: [
          {
            selectValue: "近一月",
            options:[
              { label: "近一月", value: "近一月" },
              { label: "近半年", value: "近半年" },
              { label: "近一年", value: "近一年" },
            ]
          }
        ],
        dateTypeObject:{ "近一月":"03", "近半年":"02", "近一年":"02"},
        chartsData: {
          xData: [],
          yData: [],
        },
        echartsOption:{
          legend:{
            show:false,
          }
        },
        searChForm: {
          startTime: '',
          endTime: '',
          dateType:''
        },
      };
    },
    methods: {
      selectChange(item) {
        // console.log(item);
        this.searChForm.startTime = time_select_optios[item].startTime+" 00:00:00"
        this.searChForm.endTime = time_select_optios[item].endTime+" 23:59:59"
        this.searChForm.dateType = this.dateTypeObject[item]
        this.searChForm.areaCode = this.$store.state.account.user.deptIds;
        this.getData()
      },
      getData() {
        // console.log(this.searChForm)
        alarmHandlingTrend(this.searChForm).then(res=>{
          if(res.code==200){
            this.chartsData.xData = res.data.xAxle
            this.chartsData.yData = res.data.data
          }
        })
      },
    },
    mounted() {
      this.selectChange(this.selectOptions[0].selectValue)
    },
  };
</script>

<style lang="scss" scoped>
  .accidentDistribution-root {
    #echarts-accidentDistribution {
      height: 30vh;
    }
  }
</style>
